<template>
  <section class="index">
    <div class="hello">
      <span style="font-size: 30px;font-weight: bolder;color: black ;margin-left: 300px;">您好{{user.userName}},今日学生成绩分布</span>
    </div>
    <div class="msg">

      <div class="echart-box" ref="box"></div>
      <div class="tip">
        <p class="title">公告：</p>
        <ul>
          <li @click="openMsg()"><i class="iconfont icon-flag"></i>放假通知</li>
          <li @click="openMsg()"><i class="iconfont icon-flag"></i>报告</li>
        </ul>
      </div>
    </div>

  </section>
</template>

<script>
  export default {
    data() {
      return {
        user: { //用户信息
          userName: null,
          userId: null,
          chartData: [],
          chartInstance: null
        }
      }
    },
    created() {
      this.getUserInfo()
    },
    mounted() {
      this.initChartData(),
      this.initBare()
      
    },
    methods: {
      initChartData() {
        this.chartData = [{ value: 10, name: '优秀' },
        { value: 16, name: '良好' },
        { value: 13, name: '一般' },
        { value: 6, name: '及格' },
        { value: 13, name: '不及格' }]
      },

      initBare() {
        this.chartInstance = this.$echarts.init(this.$refs.box)
        console.log(this.chartData)
        this.chartInstance.setOption({
          title: {
            text: '学生成绩分布统计图',
            subtext: '成绩分段一览',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '统计',
              type: 'pie',
              radius: '50%',
              data: this.chartData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },

      getUserInfo() { //获取用户信息
        let userName = this.$cookies.get("cname")
        let userId = this.$cookies.get("cid")
        this.user.userName = userName
        this.user.userId = userId
      },
      openMsg() {
        this.$alert('根据《国务院办公厅关于2020年部分节假日安排的通知》精神，越城区行政服务中心将于4月5日（星期五）至4月7日（星期天）进行清明节放假调休，共3天，放假期间不受理业务。4月8日（星期一）开始正常上班受理业务。望市民朋友相互转告，给您带来不便，敬请谅解。', '清明节放假通知', {
          confirmButtonText: '确定'
        })
      }
    }
  }

</script>


<style lang="less" scoped>
  .echart-box {
    width: 700px;
    height: 400px;
    padding-top: 20px;
    display: flex;
    justify-content: center;
    margin: 30px 30px;
    margin-left: 100px;
  }

  .tip {
    background-color: #eee2e2;
    height: 200px;
    width: 210px;
    margin: 50px;
  }

  .index {
    margin-left: 70px;

    .hello {
      font-size: 20px;
      color: #726f70;

      .icon-xihuan {
        font-size: 30px;
        color: #dd6572;
      }
    }

    .msg {
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 16px;
        color: #000;
        margin-top: 20px;
        margin-left: 10px;
      }

      ul {
        display: flex;
        flex-direction: column;
        width: 200px;
        overflow: hidden;
      }

      li {
        margin-top: 10px;
        font-size: 14px;
        color: lightcoral;
        cursor: pointer;
        display: inline-block;
      }
    }
  }
</style>